<template>
	<Nav class="f" bgColor="#fff">
		<view class="title dispaly-center p-l-32 nav" @click="$goUrl('back')">
			<view class="icon dispaly-align-center">
				<!-- <image src="/static/icon/left.png" mode="aspectFill"></image> -->
				<u-icon name="arrow-left" color="#020121" size="34"></u-icon>
			</view>
			<view class="r-name">图库详情</view>
		</view>
	</Nav>
	<view :style="{marginTop: navHeiht+ 'px'}">
		<view class="content ">
			<view class="title dispaly-align-center">欧式西装我的个性 我做主</view>
			<view class="swiper">
				<uni-swiper-dot selectedBackgroundColor="#020121" :info="swiperData" :current="current" mode="round">
					<swiper :current="current" @change="changeSwiper" class="swiper" circular :autoplay="true"
						:interval="2000" :duration="500">
						<swiper-item v-for="item in swiperData" :key="item" class="">
							<view class="dispaly-align-center">
								<image :src="item" mode="aspectFill"></image>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
				<view class="tip" @click="$goUrl('/subPackage/index/submitCustomized')">去定制</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		getElementHeight
	} from '@/utils/util'
	// 轮播图切换
	const current = ref(0)
	const changeSwiper = (data) => current.value = data.detail.current
	const swiperData = ref([
		'https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fGN1c3RvbSUyMG1hZGUlMjBhcHBhcmVsfGVufDB8fDB8fHww'
	])
	// 获取元素高度
	const navHeiht = ref(0)
	onMounted(async () => {
		for (var i = 0; i < 4; i++) {
			swiperData.value.push(
				'https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fGN1c3RvbSUyMG1hZGUlMjBhcHBhcmVsfGVufDB8fDB8fHww'
			)
		}
		const res = await getElementHeight('.f')
		navHeiht.value = res
	})
</script>

<style lang="scss" scoped>
	:deep(.uni-swiper__dots-box) {
		position: static !important;
		margin-top: 96rpx;
	}

	.home-content {
		margin: 0 32rpx;
	}

	.r-name {
		color: #020121;
	}

	.title {
		.icon {
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.content {
		padding: 56rpx 0 64rpx 0;

		.title {
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 500;
			font-size: 36rpx;
			color: #3D3D3D;
			margin-bottom: 64rpx;
		}

		.swiper {
			height: 1000rpx;
			position: relative;

			image {
				width: 600rpx;
				height: 1000rpx;
				border-radius: 20rpx;
				box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
			}

			.tip {
				position: absolute;
				bottom: -30rpx;
				right: 112rpx;
				width: 160rpx;
				height: 72rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				text-align: center;
				line-height: 72rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 28rpx;
				color: #020121;
				box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
			}
		}
	}
</style>

<style>
	page {
		background-color: #fff;
	}
</style>